การ import และ export ใน ReactJs

เราไม่สามารถพัฒนา Web Application ด้วย ReactJS โดยใช้ไฟล์เพียงหนึ่งไฟล์ได้ เพื่อความสะดวกเราควรแยกไฟล์ในแต่ละ Component และมีเรียกใช้งานเมื่อต้องการเรียกใช้ บทความนี้จะแสดงตัวอย่างการ import และ export ไฟล์ใน ReactJS

รับเขียนโปรแกรม React

ไฟล์ import1.js

export const Component1=function(){
    return (<div>
        Component1
    </div>);
};

export const Component2=function(){
    return (<div>
        Component2
    </div>);
};

ไฟล์ import2.js

const Component3=function(){
    return (<div>
        Component3
    </div>);
};

export default Component3;

1. export

ถ้าเราต้องการเรียกใช้ Component1 และ Component2 จากไฟล์ import1.js สามารถทำได้ดังนี้

import {Component1,Component2} from './import1'; //นำเข้า Component1,Component2 จากไฟล์ import1.js

function App() {
return (
    <div >
      <Component1 />
      <Component2 />
    </div>
);
}

หรือจะ import แบบแยกบรรทัดก็ได้เช่นกัน

import {Component1} from './import1';
import {Component2} from './import1';

function App() {
return (
    <div >
      <Component1 />
      <Component2 />
    </div>
);
}

หากต้องการเปลี่ยนชื่อ Component ที่ import มาสามารถทำได้ดังนี้

import {Component1 as Compo1} from './import1';
import {Component2 as Compo2} from './import1';

function App() {
return (
    <div >
      <Compo1 />
      <Compo2 />
    </div>
);
}

เราสามารถใช้ * เพื่อ import ทุกตัวแปร ในไฟล์ import1

import * as Component from './import1';

function App() {
return (
    <div >
      <Component.Component1 />
      <Component.Component2 />
    </div>
);
}

จะสังเกตุว่าเราต้องระบบุชื่อตัวแปรไว้สำหรับเก็บ ตัวแปรทั้งสอง( Component1 และ Component2 )ที่ export มาจากไฟล์ import1.js ก่อน ( ในที่นี้คือตัวแปร Component หลัง as )

ผลลัพธ์ที่ได้ทั้งหมดของตัวอย่างในข้อ 1. export คือ

2. export default

ข้อแตกกต่างคือเวลา import เราไม่ต้องใช้ชื่อเดียวกับตัวแปร export แต่ในหนึ่งไฟล์สามารถมีคำสั่ง export default ได้หนึ่งคำสั่งเท่านั้น ดังนี้

import {Component1 as Compo1 , Component2 as Compo2} from './import1';
import Component3 from './import2';//นำเข้า Component3 จากไฟล์ import2.js

function App() {
return (
    <div >
      <Compo1 />
      <Compo2 />
      <Component3 />
    </div>
);
}

จะสังเกตุว่า การใช้ export default ไม่ต้องมี { } ( เครื่องหมายปีกกา) ครอบชื่อตัวแปรที่ export

ผลลัพธ์ที่ได้คือ